
var pageCount = 0; //页码
var pageTag = 0; // 切换标识

mui.init({
    pullRefresh: {
        container: '#pullrefresh',
        down: {
            style:'circle',
            callback: pulldownRefresh
        },
        up: {
            auto:true,
            contentrefresh: '正在加载...',
            callback: pullupRefresh
        }
    }
});


function pullupRefresh() {
    console.log('pullup,pageTag: '+pageTag,'pageCount:',pageCount)
    setTimeout(function() {
        mui('#pullrefresh').pullRefresh().endPullupToRefresh((++pageCount > 2)); //参数为true代表没有更多数据了。
        var table = document.body.querySelector('.mui-table-view');
        var cells = document.body.querySelectorAll('.mui-table-view-cell');
        var newCount = cells.length > 0 ? 5 : 20;//首次加载20条，满屏
        for (var i = cells.length, len = i + newCount; i < len; i++) {
            var li = document.createElement('li');
            li.className = 'mui-table-view-cell';
            li.innerHTML =`
                    <div class="mui-table">
                        <div class="mui-table-cell mui-col-xs-6">
                            <h5 class="mui-ellipsis"><span class="mui-icon-circles"></span>${pageTag}-${i}信息化推进办公化信息化推进办公化</h5>
                        </div>
                        <div class="mui-table-cell mui-col-xs-6 mui-text-right">
                            <span class="mui-h5">2019-07-15 12:25:12</span>
                        </div>
                    </div>
                    <div class="mui-col-xs-12">
                        <p class="mui-h6 mui-ellipsis">Hi，李明明，申请交行信息卡，100元等你拿，李明明，申请交行信息卡，100元等你拿</p>
                    </div>
            `;
            table.appendChild(li);
            bindClick(li);
        }
    }, 500);
}

function addData() {
    var table = document.body.querySelector('.mui-table-view');
    var cells = document.body.querySelectorAll('.mui-table-view-cell');
    for(var i = cells.length, len = i + 5; i < len; i++) {
        var li = document.createElement('li');
        li.className = 'mui-table-view-cell';
        li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
        //下拉刷新，新纪录插到最前面；
        table.insertBefore(li, table.firstChild);
        bindClick(li);
    }
}
/**
 * 下拉刷新具体业务实现
 */
function pulldownRefresh() {
    setTimeout(function() {
        addData();
        mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
        mui.toast("为你推荐了5篇文章");
    }, 1000);
}

function bindClick(ele) {
    ele.addEventListener('tap',function () {
        // 返回按钮
        mui("#backBtn")[0].style.display = 'none';
        mui("#prevBtn")[0].style.display = 'block';
        // tab
        mui("#segmentedControlbox")[0].style.display = 'none';
        // 内容区域
        mui("#pullrefresh")[0].style.display = 'none';
        mui("#detail")[0].style.display = 'block';
    })
}

mui.ready(function () {

    // 上一步
    mui('.mui-bar').on('tap','#prevBtn',function () {
        mui("#backBtn")[0].style.display = 'block';
        mui("#prevBtn")[0].style.display = 'none';
        mui("#segmentedControlbox")[0].style.display = 'block';
        mui("#pullrefresh")[0].style.display = 'block';
        mui("#detail")[0].style.display = 'none';
    })

    // 切换
    mui("#segmentedControl").on("tap","a",function () {
        var tagIndex = this.getAttribute('tag');
        // console.log('tabs',tabs)
        pageTag = tagIndex;
        pageCount = 0;
        mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶
        var table = document.body.querySelector('.mui-table-view');
        table.innerHTML='';
        mui('#pullrefresh').pullRefresh().refresh(true);

        pullupRefresh()
    })

})

// console.log("xxxxxx")